<template>

  <div class="playing" v-if="playsong">
    <div class="play-all" @click="$emit('play-bar')">
     
        <img
          :src="
            playsong.song
              ? playsong.song.album.blurPicUrl
              : playsong.al
              ? playsong.al.picUrl
              : playsong.album?playsong.album.artist.img1v1Url:''
          "
        />
     
      <div class="song-details">
        <h5>
          {{ playsong.song ? playsong.song.name : playsong.al? playsong.al.name:playsong.name?playsong.name:'' }}
        </h5>
        -
        <i>{{ playsong.song ? playsong.song.artists[0].name : playsong.ar?playsong.ar[0].name :playsong.artists? playsong.artists[0].name:''}}</i>
      </div>
    </div>
    <div class="bofang">
      <canvas ref="canvas" width="60" height="60"></canvas>
      <i
        class="iconfont icon-play1"
        v-if="!played"
        @click.stop="$emit('playing')"
      ></i>
      <i
        class="iconfont icon-zanting1"
        v-else
        @click.stop="$emit('paused')"
      ></i>
    </div>
    <div class="songList" @click="$emit('showMyPlaylist')">
      <i class="iconfont icon-playlist-play"></i>
    </div>
  </div>
 
</template>

<script>
export default {
  props: {
    playsong: Object,

    played: Boolean,
    duration: Number,
    durationchange: Number,
    
  },
  computed: {
    percentedProgress: function () {
      return this.duration === 0 ? 0 : this.durationchange / this.duration;
    },
  },
  watch: {
    percentedProgress: function (n) {
      const context = this.$refs.canvas.getContext("2d");
      context.clearRect(0, 0, 60, 60);
      context.lineWidth = 3;
      context.beginPath();
      context.arc(
        30,
        30,
        28,
        (Math.PI / 180) * -90,
        (Math.PI / 180) * (360 * n - 90)
      );
      context.strokeStyle = "#D43C33";
      context.lineWidth = 3;
      context.stroke();

      context.beginPath();
      context.arc(
        30,
        30,
        28,
        (Math.PI / 180) * (360 * n - 90),
        (Math.PI / 180) * 270
      );
      context.strokeStyle = "rgba(0,0,0,0.3)";
      context.lineWidth = 2;

      context.stroke();
    },
  },
};
</script>

<style lang="less" scoped>
.playing {
  width: 100%;
  height: 60px;
  background: whitesmoke;
  position: fixed;
  bottom: 0;
  border-radius: 20px 20px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  .play-all {
    display: flex;
    flex: 1;
    align-items: center;
   
    
      img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
       
       
      }
    

    .song-details {
      display: flex;
      // flex: 1;
      line-height: 60px;
      height: 60px;
      margin: 0 5px;
      
      h5 {
        font-size: 16px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        line-height: 60px;
        margin: 0 ;
        
      }
      i {
        font-size: 10px;
       
      }
    }
  }

  .bofang {
    width: 30px;
    height: 30px;
    // outline: 1px solid skyblue;
    position: relative;
    canvas {
      position: absolute;
      top: 0;
      left: -3px;
      z-index: -1;
      width: 100%;
      height: 100%;
      // outline: 1px red solid;
    }

    i {
      font-size: 24px;
      line-height: 30px;
      text-align: center;
    }
  }

  .songList {
    margin-left: 5px;
    i {
      font-size: 26px;
    }
  }
}
</style>
